<template>
    <div class="retrieve">
        <CoffeeNav></CoffeeNav>
        <div class="logreg">
            <div class="poster">
                <p>找回密码</p>
            </div>
            <div v-if="isemail" class="log">
                <div class="inp">
                    <van-field v-model="email" label="邮箱" placeholder="输入邮箱"/>
                    <van-field v-model="cross" label="验证码" placeholder="输入验证码">
                        <template #button>
                            <van-button size="small" color="#CC9145" @click="emailValidCode">发送验证码</van-button>
                        </template>
                    </van-field>
                </div>
                <div class="findback">
                    <span @click="intoLogin">已有账号，立即登陆</span>
                </div>
                <div class="button">
                    <van-button plain block round hairline color="#CC9145" @click="checkValidCode">下一步</van-button>
                </div>
            </div>
            <div v-show="!isemail" class="log">
                <div class="inp">
                    <van-field v-model="phone" type="number" label="手机号" placeholder="输入手机号"/>
                    <van-field v-model="password" :type="isPass ? 'password' : 'text'" label="密码" placeholder="输入密码" :right-icon="isPass ? 'closed-eye' : 'eye-o'" @click-right-icon="isPass = !isPass" />
                </div>
                <div class="findback">
                    <span @click="intoLogin">已有账号，立即登陆</span>
                </div>
                <div class="button">
                    <van-button block round hairline color="#CC9145" @click="retrievePassword">提交</van-button>
                    <van-button plain block round hairline color="#CC9145" @click="back">返回</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CoffeeNav from '../components/CoffeeNav.vue'
import {utils} from '../assets/js/utils';
import '../assets/less/retrieve.less';
    export default {
        name: 'Retrieve',
        data () {
            return {
                isPass: true,
                email: '',
                cross: '',
                isemail: false,
                phone: '',
                password:''
            }
        },
        components:{
            CoffeeNav
        },
        methods:{
            back(){
                this.$router.go(-1);
            },
            intoLogin(){
                this.$router.push({name: 'Login'});
            },
            emailValidCode () {
                let tokenString = this.$cookies.get("tokenString");
                if (!tokenString) {
                    return this.$router.push({name: 'Login'});
                }
                this.$toast.loading({
                    message: "加载中",
                    forbidClick: true,
                    duration: 0
                });
                let emailData = {
                    email:{
                    value:this.email,
                    reg:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                    errorMsg:'邮箱名允许汉字、字母、数字，域名只允许英文域名'
                  }
                }
                if(!utils.validForm(emailData)){
                    return;
                }
                this.$axios({
                    method: 'POST',
                    url: '/emailValidCode',
                    data: {
                        appkey: this.appkey,
                        tokenString,
                        email: this.email
                    }
                }).then(res => {
                    console.log('res emailValidCode ==> ', res);
                    this.$toast.clear();
                }).catch(err => {
                    this.$toast.clear();
                    console.log('err ==> ', err);
                })
            },
            checkValidCode () {
                let tokenString = this.$cookies.get("tokenString");
                if (!tokenString) {
                    return this.$router.push({name: 'Login'});
                }
                this.$toast.loading({
                    message: "加载中",
                    forbidClick: true,
                    duration: 0
                });
                this.$axios({
                    method: 'POST',
                    url: '/checkValidCode',
                    data: {
                        appkey: this.appkey,
                        tokenString,
                        validCode: this.cross
                    }
                }).then(res => {
                    // console.log('res checkValidCode ==> ', res);
                    this.$toast.clear();
                    if (res.data.code === 'K001') {
                        this.isemail = false;
                    } else {
                        this.$toast({
                            message: "验证码错误！",
                            forbidClick: true,
                            duration: 1000
                        });
                    }
                }).catch(err => {
                    this.$toast.clear();
                    console.log('err ==> ', err);
                })
            },
            retrievePassword () {
                let tokenString = this.$cookies.get("tokenString");
                if (!tokenString) {
                    return this.$router.push({name: 'Login'});
                }
                this.$toast.loading({
                    message: "加载中",
                    forbidClick: true,
                    duration: 0
                });
                let retrieveData = {
                    phone:{
                      value:this.phone,
                      reg:/^1[3-9]\d{9}$/,
                      errorMsg:'手机号输入错误'
                    },
                    password:{
                        value:this.password,
                        reg:/^[A-Za-z]\w{5,15}$/,
                        errorMsg:'密码输入错误'
                    }
                }
                if(!utils.validForm(retrieveData)){
                    return;
                }
                this.$axios({
                    method: 'POST',
                    url: '/retrievePassword',
                    data: {
                        appkey: this.appkey,
                        tokenString,
                        phone: this.phone,
                        password: this.password
                    }
                }).then(res => {
                    // console.log('res retrievePassword ==> ', res);
                    this.$toast.clear();
                    if(res.data.code === 'L001') {
                        this.intoLogin();
                    }
                }).catch(err => {
                    this.$toast.clear();
                    console.log('err ==> ', err);
                })
            }
        }
    }
</script>

<style lang="less" scoped>

</style>